/**
TODO: 计划开发一个基础页面，通过一些配置可以完成CRUD的基本操作，目前没完成
 */
<template>
  <div>
    <query-grid
      :url="url"
      :downloadUrl="downloadUrl"
      :importUrl="importUrl"
      :queryColumns="queryColNum"
      :rowKey="rowKey"
      :queryParams="queryParams"
      :multiple="multiple"
      :operating="operating"
      :queryOptions="queryOptions"
      :queryForm="queryForm"
      :columns="gridColumns"
      :size="size"
      :border="border"
      :sorts="sorts"
      :pageSize="pageSize"
      :pageNo="pageNo"
      :height="height"
      :fixeds="fixeds"
      :editClick="editClick"
      :downloadClick="downloadClick"
      :newClick="newClick"
      :queryClick="queryClick"
    />
  </div>
</template>

<script>
import QueryGrid from "@comp/grid/QueryGrid.vue";
export default {
  components: { QueryGrid },
  data() {
    return {
      queryParams: {},
      exp: false,
    };
  },
  computed: {
  },
  props: {
    queryForm: Object,
    queryOptions: {
      type: Object,
      required: true,
      validator: function(obj) {
        for (let i = 0; i < Object.keys(obj).length; i++) {
          const key = Object.keys(obj)[i];
          if (typeof obj[key] != "string" && typeof obj[key] != "object") {
            console.error(
              `/src/pages/main/components/grid/QueryGrid.vue 组件属性queryOptions校验失败，${key}值的类型必须是String或Object`
            );
            return false;
          } else if (typeof obj[key] == "string") {
            return true;
          } else if (
            typeof obj[key] == "object" &&
            (!obj[key].hasOwnProperty("label") ||
              !obj[key].hasOwnProperty("type"))
          ) {
            console.error(
              `/src/pages/main/components/grid/QueryGrid.vue 组件属性queryOptions校验失败，在${key}属性中必须包含label、type`
            );
            return false;
            break;
          }
        }
        return true;
      },
    },
    queryColNum: {
      type: Number,
      default: 4,
      validator: (value) => value <= 4,
    },
    url: { type: String, required: true },
    importUrl: String,
    downloadUrl: String,
    size: {
      type: String,
      validator: function(value) {
        return (
          ["medium", "small", "mini"].findIndex((item) => item == value) >= 0
        );
      },
      default: "medium",
    },
    border: { type: Boolean, default: false },
    rowKey: { type: String, required: true },
    multiple: { type: Boolean, default: false },
    sorts: {
      type: [Array, String],
      default: () => "no",
      validator: function(value) {
        return (
          ["all", "no"].findIndex((item) => item == value) >= 0 ||
          Array.isArray(value)
        );
      },
    },
    pageSize: { type: Number, default: 20 },
    pageNo: { type: Number, default: 1 },
    height: Number,
    fixeds: { type: Array, default: () => [] },
    operating: {
      type: [Array, Boolean],
      validator: function(arr) {
        const list = [
          "edit",
          "delete",
          "new",
          "download",
          "import",
          "query",
          "info",
        ];
        for (let i = 0; i < arr.length; i++) {
          if (list.findIndex((item) => item == arr[i]) < 0) {
            console.error(
              '/src/pages/main/components/grid/Grid.vue 属性检查失败，属性operating的值只能是false或数组["edit", "delete", "new", "download", "import","query","info"]'
            );
            return false;
          }
        }
        if (arr == true) {
          console.error(
            '/src/pages/main/components/grid/Grid.vue Grid.vue属性检查失败，属性operating的值只能是false或数组["edit", "delete", "new", "download", "import","query","info"]'
          );
          return false;
        }
        return true;
      },
      default: () => ["edit", "delete", "new", "query", "info"],
    },
    editClick: {
      type: Function,
      default: (index, row) => {
        console.log(index, row);
      },
    },
    deleteClick: {
      type: Function,
    },
    newClick: {
      type: Function,
      default: () => {
        console.log("new button click");
      },
    },
    downloadClick: {
      type: Function,
    },
    queryClick: {
      type: Function,
    },
    gridColumns: {
      type: Array,
      required: true,
      validator: function(item) {
        for (let i = 0; i < item.length; i++) {
          if (!item[i].hasOwnProperty("label")) {
            console.error(
              "/src/pages/main/components/grid/Grid.vue Grid.vue属性检查失败，表格组件的列（columns）属性缺失(label)属性值!",
              item[i]
            );
            return false;
          }
          if (!item[i].hasOwnProperty("prop")) {
            console.error(
              "/src/pages/main/components/grid/Grid.vue Grid.vue属性检查失败，表格组件的列（columns）属性缺失(prop)属性值!",
              item[i]
            );
            return false;
          }
        }
        return true;
      },
    },
  },
  methods: {
    edit(index, row) {
      console.log("edit", index, row);
    },
    dc(url) {
      window.open("http://www.whga.cn");
    },
  },
};
</script>